<template>
	<el-container>
		<el-aside :width="asideWidth">
			<div class="logo">
				<el-image style="width: 30px; height: 30px" :src="url"  />
				<h4 v-show="isShowTitle">后台管理系统</h4>
			</div>
			<p class="home-title">首页</p>

			<!-- 菜单 -->
			<Menu :collapse="collapse"></Menu>
		</el-aside>
		<el-container>
			<el-header>
				<el-icon :size="30" @click="onFlod">
					<component :is="headerLeft"></component>
				</el-icon>
				<div>
					<span class="title">欢迎您 {{ user.nick }}</span>
					<el-dropdown trigger="click">
						<el-avatar shape="square" :size="30" :src="user.headerimg" />
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>设置</el-dropdown-item>
								<el-dropdown-item @click="onLogout">退出</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</el-header>
			<el-main> 
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import { Fold, Location,Expand} from '@element-plus/icons-vue'
import Menu from '@/components/menu.vue'
export default {
	components: {
		Fold,
		Expand,
		Location,
		Menu
	},
	data() {
		return {
			url: 'src/assets/logo.jpeg',
			user:{},
			asideWidth:'200px',
			collapse:true,
			headerLeft: 'Fold',
			isShowTitle:true
		}
	},
	methods:{
		onLogout(){
			localStorage.removeItem('TOKEN')
			this.$store.dispatch('user/clearUser')
			this.$router.replace({path:'/'})
		},
		onFlod(){
			this.collapse = !this.collapse
			this.asideWidth = this.collapse?'200px':'70px'
			this.headerLeft = this.collapse?'Fold':'Expand'
			this.isShowTitle = this.collapse

		}
	},
	created(){
		this.user = this.$store.getters['user/user']
	}

}
</script>
<style lang="scss" scoped>
.el-container {
	width: 100%;
	height: 100vh;
	.el-aside {
		background-color: #2d3436;
		transition: .3s;
		.logo {
			display: flex;
			color: white;
			padding: 2px 20px;
			align-items: center;
			height: 50px;
			h4 {
				margin-left: 10px;
			}
		}
		.home-title {
			padding-left: 20px;
			color: rgb(212, 212, 9);
		}
		.el-menu{
			border-right: 0;
		}
	}
	.el-container {
		.el-header {
			background-color: #7f8fa6;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title {
				margin-right: 5px;
				
				
			}
		}
	}
}
</style>
